<template>
    <!-- 遮罩层 -->
    <div :class="['mask', showPage?'':'hide']">
        <!-- 关闭该页面 -->
        <el-tooltip class="item" effect="light" content="关闭 Esc" placement="bottom">
            <div class="exit-now-page" @click="exitNowPage">×</div>
        </el-tooltip>
        <!-- 主体内容显示 -->
        <div class="main-container">
            <!-- 图片视频显示区块 -->
            <div class="left-block">
                <!-- 显示图片 -->
                <div :class="[optShow?'':'hide']">
                    <div class="block">
                        <el-carousel trigger="click" height="655.2px" :autoplay="false" indicator-position="none">
                        <el-carousel-item v-for="item in imgs" :key="item">
                            <!-- 图片展示 遍历显示 -->
                            <img style="width: 100%;height: 100%;" :src="require('@/assets/img/contentdetails/' + item)" />
                        </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
                <!-- 显示视频 -->
                <div :class="[optShow?'hide':'', 'video-block']">
                    <!-- 对视频播放做总体控制 -->
                    <div class="video-control-block">
                        <!-- 视频标签 -->
                        <video class="mp4" controlslist="nodownload" autoplay src="../assets/img/mp4/a2.mp4" controls muted loop></video>
                    </div>
                </div>
            </div>
            <!-- 作者发布内容及其评论显示区块 -->
            <div class="right-block">
                <!-- 作者信息 -->
                <div :class="['author-info', showDx?'dx':'']">
                    <!-- 作者信息 -->
                    <div class="creator-info">
                        <!-- 放头像和昵称 -->
                        <div class="head-name-block">
                            <!-- 放头像 -->
                            <div class="head-block">
                                <img src="../assets/img/login/hh.jpg">
                            </div>
                            <!-- 放昵称 -->
                            <div class="name-block">
                                <span>{{ merchantName }}<!-- CreateBiliCat --></span>
                                <!-- 用户身份 -->
                                <div class="sign">
                                    ^BiliCat^
                                </div>
                            </div>
                        </div>
                        <!-- 关注他 / 取消关注他 [ 按钮 ] -->
                        <div class="follow-status-block">
                            <button :class="['follow-btn', btnShow?'':'hide']" @click="like">关注</button>
                            <button :class="['not-follow-btn', btnShow?'hide':'']">已关注</button>
                        </div>
                    </div>
                </div>
                <!-- 购物信息 该区域添加了滚动事件 -->
                <div class="shopping-info-block" ref="dialogCountent" @scroll="test($event)">
                    <!-- 显示价格 -->
                    <div class="show-price-block">
                        <div>
                            &nbsp;&nbsp;&nbsp;
                            <span class="pre-sales">¥ {{ spInfo.goods_price }}</span>&nbsp;
                            <span class="after-sales">券后价 ¥ {{ (spInfo.goods_price * 0.98).toFixed(2) }}</span><!-- toFixed(2) 保留小数后两位 -->
                        </div>
                        <!-- 如何获得优惠 -->
                        <div style="display: flex;">
                            <div class="preferential-block">
                                可以与店家商议价格
                            </div>
                            <div class="preferential-block">
                                该店家支持讨价还价
                            </div>
                        </div>
                    </div>
                    <!-- 商品描述 -->
                    <div class="product-description">
                        <div style="margin-left: 20px;width: 400px;">
                            <!-- 标题 -->
                            <div class="title-info">{{ spInfo.goods_name }}</div>
                            <!-- 内容 -->
                            <div>
                                <span class="gflogo">个体商户</span>
                                <!-- 这段时间感悟挺多的，从0到1的艰辛大概只有开店的人才懂。非常感谢支持我的家人和朋友，也感谢每一个陪在我身边的小伙伴。加油杭桃里云朵茶酒，加油加油! -->
                                {{ spInfo.goods_introduce }}
                            </div>
                            <!-- 时间 地址 -->
                            <div style="margin-top: 8px;">
                                <!-- 2023-11-11 四川 -->
                                {{ spInfo.add_time }}
                            </div>
                        </div>
                    </div>
                    <!-- 购买的数量 -->
                    <div style="width: 400px;height: 100px;margin-top: 12px;margin-left: 20px;">
                        <span>购买数量:&nbsp;&nbsp;&nbsp;</span>
                        <el-input-number v-model="num" :min="1" :max="99999" label="购买数量" size="mini"></el-input-number>
                    </div>
                </div>
                <!-- 底部 -->
                <div class="bottom-block">
                    <!-- 购买按钮 -->
                    <div class="purchase-block">
                        <button class="purchase-btn" @click="purchaseCommodity">购买</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    // 接受父组件传入的数据
    props:['spid'],
    data(){
        return {
            // 商户名
            merchantName: '',
            // 随机城市
            citys: [
                'A市', 'B市', 'C市', 'D市', 'E市', 'F市',
                'G市', 'H市', 'I市', 'J市', 'K市', 'L市',
                'M市', 'N市', 'O市', 'P市', 'Q市', 'R市','S市', 
                'T市', 'U市', 'V市', 'W市', 'X市', 'Y市', 'Z市'
            ],
            // 获取到的商品信息
            spInfo: {
                upd_time: 0, // 修改时间
                goods_price: 0, //价格
                goods_name: '暂无数据', // 商品名字
                add_time: 0 // 添加时间
                //
            },
            // 需要购买的数量
            num: 1,
            //  什么时候显示底线
            showDx: false,
            // true 是 关注up主, false 是没有关注up主
            btnShow: true,
            // 控制页面的显示 true 显示  false 不显示
            showPage: false,
            // true 显示图片 false 显示短视频
            optShow: true,
            // 详情页的所有图片
            imgs: [
                '58adc08e3ee6f37c7d90679bbd26282.jpg',
                'c1d3e3f0ad1df6a3c1cecda25d004aa.jpg',
                'eb2508bec7af84dc75bbbe8f18485f8.jpg',
                'fa87b7714224866e67106998ef2d2ba.jpg',
                '42fb8147e81ded4396e590892958494.jpg',
                'e8e47cc8bedb55134cff8c1cb8fb420.jpg',
                'eca35c0eda85f951b9e1b1d156b0e62.jpg',
                'ad11b955d714bdac969bf6c953d8a7d.jpg',
                'df718bcea9c7101b26a0f218aaf87ef.jpg'
            ],
            mp4name: ''
            // 变量区
        }
    },
    methods: {
        // 关注up主
        like(){
            this.$message.warning('目前全球戒严暂时无法关注任何人,请见谅...');
        },
        // 此方法被父组件 GoodsView.vue 调用
        showNowPage(){
            this.showPage = true;
        },
        // 购买商品
        async purchaseCommodity(){
            let city = this.citys[Math.round(Math.random()*this.citys.length)];
            let commodityInfo = {
                // 创建数据非空项
                user_id: sessionStorage.getItem('userid'),
                // 创建数据非空项 (总价)
                order_price: this.spInfo.goods_price * this.num,
                // 创建数据非空项
                order_number: this.num + '',
                // 创建数据非空项
                consignee_addr: city,
                // 创建数据非空项
                create_time: 1701261743
            };
            let res = await this.$http.post('orders', commodityInfo);
            console.log('购买区块+++++++++++++++++++++++++');
            console.log(res);
            if(res.meta.status != '201'){
                this.$message.error('购买失败');
                return false;
            }
            this.$message.success('购买成功');
            // 此处省略百行代码🤪🤪🤪....
        },
        // 滚动事件
        test(e){
            let initialStatus = 0;
            let scrollTop = this.$refs.dialogCountent.scrollTop;
            initialStatus = scrollTop;
            if(initialStatus != 0){
                this.showDx = true;
            } else {
                console.log('复位状态');
                this.showDx = false;
            }
        },
        // 关闭详情页面
        exitNowPage(){
            this.showPage = false;
        },
        // 打开详情页面 spid 值从父组件来的
        async toDetails(spid){
            console.log(spid)
            let res = await this.$http.get('goods/' + spid);
            console.log('ppppppppppppppppp');
            console.log(res);
            if(res.meta.status != '200'){
                console.log('获取商品数据失败');
                return false;
            }
            this.spInfo = res.data; // 获取到的值给到 spinfo

            // 获取商户信息
            let res2 = await this.$http.get('users/' + res.data.uid);
            console.log('++++++++ 获取商户信息 ++++++++++');
            if(res.meta.status != '200'){
                console.log('获取商户信息失败');
                return false;
            }
            // 商户名
            let userName = res2.data.username;
            this.merchantName = userName;
            // 此处省略百行代码🤪🤪🤪...
        }
        // 方法区
    }
}
</script>

<style lang="less" scoped>
//标题
.title-info{
    font-size: 18px;font-weight: bold;
}
.purchase-btn{
    /* 取消原有按钮的样式 */
    border: 0;background-color: rgba(255, 255, 255, 0);
    width: 390px;height: 50px;border: rgba(167, 151, 151, 0.368) 1px solid;border-radius: 30px;font-size: 16px;color: white;background-color: red;font-weight: bold;
}
.purchase-btn:hover{
    background-color: aliceblue;color: rgba(117, 107, 107, 0.878);
}
.purchase-block{
    width: 440px;height: 50px;position: absolute;margin: auto;bottom: 12px;display: flex;justify-content: center;
}
.preferential-block{
    width: 140px;height: 30px;border: red 1px solid;margin-left: 20px;margin-top: 16px;font-size: 14px;line-height: 33px;text-align: center;color: red;font-weight: bold;border-radius: 3.6px;
}
// 售后颜色
.after-sales{
    color: red;
}
//售前颜色
.pre-sales{
    // 默认褐色 需要在此添加颜色
}
// 显示价格区域
.show-price-block{
    width: 100%;height: 90px;font-size: 20px;
}
// 底部框
.bottom-block{
    width: 100%;height: 130px;
}
// 购物信息的容器
.shopping-info-block{
    width: 100%;height: 436.4px;overflow-y: auto;white-space: normal;
}
.not-follow-btn{
    border: 0;background-color: rgba(255, 255, 255, 0); // 清除默认样式
    width: 100%;height: 100%;border-radius: 50px;border: rgba(167, 151, 151, 0.368) 1px solid;color: black;font-size: 15px;font-weight: bold;color: rgba(0, 0, 0, 0.49);
}
.not-follow-btn:hover{
    background-color: rgba(167, 151, 151, 0.1);
}
.follow-btn{
    border: 0;background-color: rgba(255, 255, 255, 0); // 清除默认样式
    width: 100%;height: 100%;border-radius: 50px;border: rgba(167, 151, 151, 0.368) 1px solid;background-color: red;color: white;font-size: 15px;font-weight: bold;
}
.follow-status-block{
    width: 96px;
}
.head-name-block{
    width: 310px;position: relative;display: flex;
}
// 放名字
.name-block{
    margin-left: 12px;line-height: 40px;display: flex;position: relative;
}
// 放投头像
.head-block{
    width: 40px;height: 40px;border-radius: 50%;overflow: hidden;animation: head 6s linear infinite;
}
@keyframes head{
    0%{transform: rotateY(100deg);}
    100%{transform: rotateY(0deg);}
}
.head-block:hover{
    /* 暂时抛弃该功能 触摸头像变奇怪 */
    animation: head 10s linear infinite;
}
.creator-info{
    width: 100%;height: 40px;position: absolute;margin: auto;top: 0;bottom: 0;display: flex;justify-content: center;
}
.author-info{
    width: 100%;height: 88.8px;position: relative;
}
// 作者信息底线
.dx{
    border-bottom:  rgba(193, 180, 180, 0.499) 1px solid;
}
/* 遮罩 优先显示级10 */
.mask{
    /* 主容器 优先显示级11 */
    .main-container{
        /* 作者发布内容及其评论显示区块 */
        .right-block{
            width: 440px;height: 655.2px;
        }
        /* 图片视频显示区块 */
        .left-block{
            .video-block{
                .video-control-block{
                    .mp4{
                        width: 100%;height: 100%;position: relative;object-fit: fill;
                    }
                    width: 100%;height: 655.2px;position: relative;
                }
                width: 100%;height: 1200;position: relative;
            }
            width: 440px;height: 655.2px;position: relative;background-color: rgba(233, 185, 228, 0.496);
        }
        width: 880px;height: 655.2px;background-color: white;z-index: 11;margin: auto;left: 0;top: 0;right: 0;bottom: 0;position: absolute;border-radius: 23px;overflow: hidden;display: flex;justify-content: space-between;
    }
    position: fixed;z-index: 10;margin: auto;top: 0;left: 0;width: 100%;height:100%;background-color: rgba(247, 240, 240, 0.97);
}
// 隐藏属性
.hide{
    display: none;
}
.exit-now-page{
    width: 40px;height: 40px;position: absolute;margin: auto;left: 20px;top: 20px;border-radius: 50px;font-size: 24px;color: rgb(67, 70, 72);font-family: Bradley Hand ITC;text-align: center;line-height: 44px;cursor: pointer;font-weight: 500;border: rgba(86, 90, 93, 0.527) 1px solid;
}
.exit-now-page:hover{
    background-color: rgba(151, 157, 161, 0.128);
}
.head-block img{
    width: 100%;height: 100%;
}
//不显示滚动条
::-webkit-scrollbar {
    width: 0px; /* 滚动条宽度 */
}
@keyframes lign{
    0%{color: white;}
    25%{color: rgb(228, 74, 115);}
    50%{color: rgb(43, 185, 195);}
    75%{color: rgb(214, 54, 190);}
    100%{color: white;}
}
.sign{
    width: 66px;height: 20px;background-color: cadetblue;position: relative;top: 0;bottom: 0;margin: auto;border-radius: 2.5px;color: white;font-size: 12px;line-height: 20px;text-align: center;font-weight: bold;font-family: 幼圆;left: 10px;animation: lign 1s linear infinite;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.gflogo{
    background-color: black;color: white;border-radius: 3px;font-size: 6px;position: relative;margin: auto;top: -1px;
}
</style>